<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello, world 高德地图</title>
<style type="text/css">
html {
    height: 100%
}

body {
    height: 100%;
    margin: 0px;
    padding: 0px
}

#container {
    height: 60%;
    width: 60%
}
</style>
<script type="text/javascript"
    src="http://api.amap.com/webapi/init?v=1.0">
	
</script>

<script type="text/javascript">
	//定义一个插件类 homeControlDiv，AMap 为命名空间
	AMap.homeControlDiv = function() {
	};
	AMap.homeControlDiv.prototype = {
		_getHtmlDom : function(map) {
			this.map = map;
			// 创建一个能承载控件的<div>容器
			var controlUI = document.createElement("DIV");
			controlUI.style.width = '80px'; //设置控件容器的宽度
			controlUI.style.height = '20px'; //设置控件容器的高度
			controlUI.style.backgroundColor = 'white';
			controlUI.style.borderStyle = 'solid';
			controlUI.style.borderWidth = '2px';
			controlUI.style.cursor = 'pointer';
			controlUI.style.textAlign = 'center';

			// 设置控件的位置 
			controlUI.style.position = 'absolute';
			controlUI.style.left = '120px'; //设置控件离地图的左边界的偏移量
			controlUI.style.top = '5px'; //设置控件离地图上边界的偏移量
			controlUI.style.zIndex = '300'; //设置控件在地图上显示

			// 设置控件字体样式
			controlUI.style.fontFamily = 'Arial,sens-serif';
			controlUI.style.fontSize = '12px';
			controlUI.style.paddingLeft = '4px';
			controlUI.style.paddingRight = '4px';
			controlUI.innerHTML = "返回中心";

			// 设置控件响应点击onclick 事件
			controlUI.onclick = function() {
				map.setCenter(new AMap.LngLat(116.404, 39.915));
			}
			return controlUI;
		}
	};
</script>

<script type="text/javascript">
	function initialize() {
		var mapObj = new AMap.Map("container"); // 创建地图实例
		var point = new AMap.LngLat(116.404, 39.915); // 创建点坐标
		mapObj.setCenter(point); // 设置地图中心点坐标

		mapObj.plugin([ "AMap.ToolBar", "AMap.OverView,AMap.Scale" ],
				function() {
					// 加载工具条
					tool = new AMap.ToolBar({
						direction : false, //隐藏方向导航
						ruler : false, // 隐藏视野级别控制尺
						autoPosition : false
					// 禁止自动定位
					});
					mapObj.addControl(tool);

					// 加载鹰眼
					view = new AMap.OverView();
					mapObj.addControl(view);

					// 加载比例尺
					scale = new AMap.Scale();
					mapObj.addControl(scale);
				});
		
		//添加自定插件
		mapObj.plugin(["homeControlDiv"], function() {
			var homeControl=new AMap.homeControlDiv(mapObj);
			mapObj.addControl(homeControl);
		});
	}
</script>
</head>
<body onload="initialize()">
    <div id="container"></div>
</body>
</html>